<template>
	<a-modal v-model="showModal"   :confirm-loading="createEditLoading" @ok="confirmHandle" @cancel="cancelBtn"
		width="1150px" :dialog-style="{ top: '30px' }" :body-style="{
      padding: '8px 20px',
    }">
		<section class="flex font-bold text-18" slot="title">
			<section class="flex items-center">
				<span>扣款</span>
				<span class="mx-6 text-28">·</span>
				<span>{{ currData.id }}</span>
			</section>
		</section>
		<a-spin :spinning="loading">
			<section style="height: 40px;margin-top: 30px; " class="flex items-center inline-form ">
				<a-form-item label="扣款类型" required>
					<a-select :disabled="!isShow"  v-model="deductionType" style="width: 200px;margin-left: 10px;" placeholder="请选择扣款类型">
						<a-select-option :value="1">押金</a-select-option>
						<a-select-option :value="2">车损</a-select-option>
						<a-select-option :value="3">其他</a-select-option>
					</a-select>
				</a-form-item>
			</section>
			<div v-if="deductionType==1">
				<a-form :form="form" class="inline-form">
					<section style="padding-right: 8px;">
						<!--违章信息-->
						<div class="p-17 ml-10 mb-10 mr-10 formstyle">
							<a-row type="flex" :gutter="16">
								<a-col :span="8">
									<a-form-item label="违章时间">
										<a-date-picker :disabled="!isShow" show-time format="YYYY-MM-DD HH:mm:ss"
											v-model="domain.occurrenceTime" placeholder="请选择违章时间" v-decorator="[
			               'occurrenceTime',
			                {
			                  rules: [{ required: true, message: '请选择违章时间' }],
			                },
			              ]"></a-date-picker>
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="违章城市">
										<!-- <a-input
			              class="w-full"
			              allow-clear
			              v-model="domain.violationCityCode"
			              placeholder="请输入违章城市"
			              v-decorator="[
			                `violationCityCode[${domain.key}]`,
			                {
			                  rules: [{ required: true, message: '请输入违章城市' }],
			                },
			              ]"
			            >
			            </a-input> -->
										<!-- v-model="cityCode" -->

										<SelectCityReturn :disabled="!isShow" ref="selectCity" :options="{ allowClear: true }"
											v-model="domain.violationCityCode" allow-clear class="w-220"
											placeholde="请选择城市" @change="search" v-decorator="[
			               'violationCityCode',
			                {
			                  rules: [{ required: true, message: '请输入违章城市' }],
			                },
			              ]" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item label="违章地点">
										<a-input :disabled="!isShow" class="w-full" allow-clear v-model="domain.violationAddress"
											placeholder="请输入违章地点" v-decorator="[
			               'violationAddress',
			                {
			                  rules: [{ required: true, message: '请输入违章地点' }],
			                },
			              ]" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item label="违章行为">
										<a-input :disabled="!isShow" class="w-full" allow-clear v-model="domain.violationContent"
											placeholder="请输入违章行为" v-decorator="[
			               'violationContent',
			                {
			                  rules: [{ required: true, message: '请输入违章行为' }],
			                },
			              ]" />
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="车辆罚分">
										<a-input-number :disabled="!isShow" class="w-full" allow-clear placeholder="请输入车辆罚分" :min="0"
											v-model="domain.violationPoint" :max="12" v-decorator="[
			               'violationPoint',
			                {
			                  rules: [{ required: true, message: '请选择车辆罚分' }],
			                },
			              ]" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item label="罚款金额（元）">
										<a-input-number :disabled="!isShow" class="w-full" placeholder="请输入罚款金额" :min="0"
											v-model="domain.feeAmount" :max="9999999999" :precision="2" v-decorator="[
			               'feeAmount',
			                {
			                  rules: [{ required: true, message: '请输入罚款金额' }],
			                },
			              ]" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item label="违章类型">
										<a-select :disabled="!isShow" class="w-full" allow-clear v-model="domain.violationType"
											placeholder="请选择违章类型" v-decorator="[
			                'violationType',
			                {
			                  rules: [{ required: true, message: '请选择违章类型' }],
			                },
			              ]">
											<a-select-option v-for="item in typeList" :value="item.id" :key="item.id">{{
			                item.name
			              }}</a-select-option>
										</a-select>
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item label="处理方">
										<a-select :disabled="!isShow" class="w-full" allow-clear v-model="domain.violationProcessor"
											placeholder="请选择处理方" v-decorator="['violationProcessor']">
											<a-select-option v-for="item in disposeList" :value="item.id"
												:key="item.id">{{
			                item.name
			              }}</a-select-option>
										</a-select>
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="处理状态">
										<a-select :disabled="!isShow" class="w-full" allow-clear v-model="domain.violationStatus"
											placeholder="请选择处理状态" v-decorator="['violationStatus']">
											<a-select-option v-for="item in processstateList" :value="item.id"
												:key="item.id">{{
			                item.name
			              }}</a-select-option>
										</a-select>
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="违约金（元）">
										<a-input-number :disabled="!isShow" class="w-full" placeholder="请输入违约金"
											v-model="domain.violationLiquidatedDamages" :max="9999999999" :precision="2"
											v-decorator="[
			                'violationLiquidatedDamages',
			                {
			                  rules: [{ required: true, message: '请输入违约金' }],
			                },
			              ]" />
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="备注">
										<a-textarea :disabled="!isShow" class="w-full" allow-clear v-model="domain.remark"
											:max-length="1000" placeholder="请输入备注" v-decorator="['remark']" />
									</a-form-item>
								</a-col>



								<a-col :span="12">
									<a-form-item class="block" :label="`违章图片${getFileLength(`images`)}/3`">
										<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
											:show-upload="getFileLength(`images`) < 3"
											@uploadSuccess="uploadSuccess($event, `images`, index)" v-decorator="[
			                'images',
			                {
			                  rules: [{ required: true, message: '请上传违章图片', type: 'array' }],
			                  initialValue: [],
			                },
			              ]" />
									</a-form-item>
								</a-col>


							</a-row>
						</div>

					</section>
				</a-form>
			</div>
			<div v-if="deductionType==2">
				<!-- 	<a-tab-pane key="carDamageInfo" tab="车损信息"> -->
				<a-form :form="carform" class="inline-form">
					<section style="padding-right: 8px;">

						<!--车损信息-->
						<div class="p-17 mt-10 formstyle">
							<a-row type="flex" :gutter="16">

								<a-col :span="8">
									<a-form-item label="费用类型">
										<a-select :disabled="!isShow" class="w-full" allow-clear
											v-model="carDamageDomains.orderRentalFeeType" placeholder="请选择费用类型"
											v-decorator="[
			                  'orderRentalFeeType',
			                  {
			                    rules: [{ required: true, message: '请选择费用类型' }],
			                  },
			                ]">
											<a-select-option v-for="item in carDamagetList" :value="item.id"
												:key="item.id">{{
			                  item.name
			                }}</a-select-option>
										</a-select>
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="费用名称">
										<a-input :disabled="!isShow" class="w-full" allow-clear v-model="carDamageDomains.feeName"
											placeholder="请输入费用名称" v-decorator="[
			                 'feeName',
			                  {
			                    rules: [{ required: true, message: '请输入费用名称' }],
			                  },
			                ]" />
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="金额（元）">
										<a-input-number :disabled="!isShow" class="w-full" placeholder="请输入金额" :min="0.01"
											v-model="carDamageDomains.feeAmount" :max="9999999999" :precision="2"
											v-decorator="[
			                  'feeAmount',
			                  {
			                    rules: [{ required: true, message: '请输入金额' }],
			                  },
			                ]" />
									</a-form-item>
								</a-col>

								<a-col class="vehicleDamage" :span="10">
									<a-form-item label="车损发生时间">
										<a-date-picker :disabled="!isShow" show-time placeholder="请选择车损发生时间" v-decorator="[
								 'occurrenceTime',
								  {
								    rules: [{ required: true, message: '请选择车损发生时间' }],
								  },
								]"></a-date-picker>
									</a-form-item>
								</a-col>
								<a-col :span="12">
									<a-form-item class="block" :label="`车损图片${carformgetFileLength(`images`)}/3`"
										:key="carDamageDomains.key">
										<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
											:show-upload="carformgetFileLength(`images`) < 3"
											@uploadSuccess="carformuploadSuccess($event, `images`, index)" v-decorator="[
								  `images`,
								  {
								    rules: [{ required: true, message: '请上传车损图片', type: 'array' }],
								    initialValue: [],
								  },
								]" />
									</a-form-item>
								</a-col>

							</a-row>
						</div>


					</section>
				</a-form>
				<!-- </a-tab-pane> -->
			</div>

			<div v-if="deductionType==3">
				<!-- <a-tab-pane key="carRentalInfo" tab="租车费用信息"> -->
				<a-form :form="rentCarform" class="inline-form">
					<section style="padding-right: 8px; ">
						<!--租车信息-->
						<div class="p-17 mt-10 formstyle">
							<a-row type="flex" :gutter="16">
								<a-col :span="8">
									<a-form-item label="费用类型">
										<a-select :disabled="!isShow" class="w-full" allow-clear
											v-model="rentCarformDomains.orderRentalFeeType" placeholder="请选择费用类型"
											v-decorator="[
	                  'orderRentalFeeType',
	                  {
	                    rules: [{ required: true, message: '请选择费用类型' }],
	                  },
	                ]">
											<a-select-option :disabled="!isShow" v-for="item in rentCarList" :value="item.id"
												:key="item.id">{{
	                  item.name
	                }}</a-select-option>
										</a-select>
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="费用名称">
										<a-input :disabled="!isShow" class="w-full" allow-clear v-model="rentCarformDomains.feeName"
											placeholder="请输入费用名称" v-decorator="[
	                  'feeName',
	                  {
	                    rules: [{ required: true, message: '请输入费用名称' }],
	                  },
	                ]" />
									</a-form-item>
								</a-col>

								<a-col :span="8">
									<a-form-item label="费用金额（元）">
										<a-input-number :disabled="!isShow" class="w-full" placeholder="请输入费用金额" :min="0.01"
											v-model="rentCarformDomains.feeAmount" :max="9999999999" :precision="2"
											v-decorator="[
	                  'feeAmount',
	                  {
	                    rules: [{ required: true, message: '请输入费用金额' }],
	                  },
	                ]" />
									</a-form-item>
								</a-col>
								<a-col :span="24">
									<a-form-item class="block" :label="`费用凭证图片${rentCarformgetFileLength(`images`)}/1`">
										<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
											:show-upload="rentCarformgetFileLength(`images`) < 1"
											@uploadSuccess="rentCarformuploadSuccess($event, `images`, index)"
											v-decorator="[
	                  `images`,
	                  {
	                    rules: [{ required: true, message: '请上传费用凭证图片', type: 'array' }],
	                    initialValue: [],
	                  },
	                ]" />
									</a-form-item>
								</a-col>

							</a-row>
						</div>

					</section>
				</a-form>
				<!-- 	</a-tab-pane> -->
			</div>

			<!--  </a-tabs> -->
		</a-spin>
		<template  #footer>
			<div v-if="isShow">
				<a-button @click="cancelBtn">取消</a-button>
				<a-button type="primary" @click="confirmHandle">确认</a-button>
			</div>
			
		</template>
	</a-modal>
</template>

<script>
	import {
		createOrderDeduction,
		getDeductList,
		getDeductionDetail
	} from '@/api/order/orderdeductions'
	import SelectCityReturn from '@/components/SelectCityReturn'
	import {
		get
	} from 'lodash'
	import moment from 'moment'

	export default {
		components: {
			SelectCityReturn
		},
		props: {},
		data() {
			return {
				createEditLoading: false,
				isshow: false, //
				showModal: false,
				loading: false,
				currData: {},
				form: this.$form.createForm(this),
				carform: this.$form.createForm(this),
				rentCarform: this.$form.createForm(this),
				costList: [
					// 费用类型
					{
						id: 1,
						name: '提前还车退费',
					},
					{
						id: 2,
						name: '燃油退费',
					},
					{
						id: 3,
						name: '其他',
					},
				],
				typeList: [
					// 违章类型
					{
						id: 1,
						name: '现场单',
					},
					{
						id: 2,
						name: '非现场单',
					},
				],
				disposeList: [
					// 处理方
					{
						id: 1,
						name: '客户',
					},
					{
						id: 2,
						name: '公司',
					},
				],
				paymentList: [
					//支付类型
					{
						id: 1,
						name: '线上扣款',
					},
					{
						id: 2,
						name: '线下扣款',
					},
				],
				processstateList: [
					//处理状态
					{
						id: 1,
						name: '已处理',
					},
					{
						id: 2,
						name: '未处理',
					},
				],
				cityCode: undefined,
				domain: {
					occurrenceTime: '',
					violationCityCode: '',
					violationAddress: '',
					violationContent: '',
					violationPoint: '',
					feeAmount: '',
					violationType: '',
					violationProcessor: undefined,
					violationStatus: undefined,
					violationLiquidatedDamages: '',
					remark: '',
					// payType: 1,
					images: [],
				},

				carDamageDomains: {
					orderRentalFeeType: '',
					feeName: '',
					feeAmount: '',
					occurrenceTime: '',
					// payType: 1,
					images: [],

					occurrenceTime: ''
				},
				rentCarformDomains: {
					orderRentalFeeType: '',
					feeName: '',
					feeAmount: '',
					// payType: 1,
					images: [],

				},

				carDamagetList: [
					// 车损费用类型
					{
						id: 1,
						name: '维修费',
					},
					{
						id: 2,
						name: '停运费',
					},
					{
						id: 3,
						name: '折旧费',
					},
					{
						id: 4,
						name: '其他费用',
					},
				],
				rentCarList: [
					// 租车费用类型
					{
						id: 1,
						name: 'ETC',
					},
					{
						id: 2,
						name: '续租',
					},
					{
						id: 3,
						name: '续租违约金',
					},
					{
						id: 4,
						name: '油电费',
					},
					{
						id: 5,
						name: '油电服务费',
					},
					{
						id: 6,
						name: '停车费',
					},
					{
						id: 7,
						name: '其他',
					},
				],
				deductionType: 1,
				isShow: true
			}
		},
		computed: {},
		watch: {
			showModal() {

				this.domain.violationCityCode = ''
			},
		},
		created() {
			this.domain.violationCityCode = ''
		},
		mounted() {},
		destroyed() {},
		methods: {
			open(data, name) {
				this.deductionType=1
				// this.$refs.selectCity.cityId = undefined
				this.form.resetFields()
				this.carform.resetFields()
				this.rentCarform.resetFields()
				this.showModal = true
				this.currData = data
				this.domain.violationCityCode = ''
				this.isShow = true
				if (name) {
					console.log(name, '详情')
					this.isShow = false
					this.getDetails()
				}
				// this.rentCarformDomains={
				// 	orderRentalFeeType: '1',
				// 	feeName: '22',
				// 	feeAmount: '11',
				// 	// payType: 1,
				// 	images: ['http://chematest.oss-cn-hangzhou.aliyuncs.com/cmtbVendor/VehicleImage/6YczZHMZApmtsDwRSmHh2023828232438.png'],

				// },
				// this.rentCarform.setFieldsValue(this.rentCarformDomains)
				// this.getOrderData(this.tabKey)
			},
			getDetails() {
				this.createEditLoading = true
				

					
					
					getDeductionDetail({
						orderId: this.currData.id
					})
					.then((data) => {
						if (data) {
							data.images=data.images.split(',');
							this.deductionType = data.deductType
							let send = null;
							let obj = {

							}
							
							if (data.deductType == 1) {
								send = 'form';
								
								
								 // setTimeout(() => {
									 
									
								 //    this.$refs.selectCity.gitNew =data.violationCityCode
								 //    this.domain.violationCityCode= data.violationCityCode
								 //      }, 1000);
								 this.$nextTick(() => {
								    this.$refs.selectCity.gitNew(data.violationCityCode)
								 
								 })
								
								obj = {
									occurrenceTime: data.occurrenceTime,
									violationCityCode: data.violationCityCode,
									violationAddress: data.violationAddress,
									violationContent: data.violationContent,
									violationPoint: data.violationPoint,
									feeAmount: data.feeAmount,
									violationType: data.violationType,
									violationProcessor: data.violationProcessor,
									violationStatus: data.violationStatus,
									violationLiquidatedDamages: data.violationLiquidatedDamages,
									remark: data.remark,
									// payType: 1,
									images: data.images,
								}
								
							} else if (data.deductType == 2) {
								send = 'carform';
								obj = {
									orderRentalFeeType: data.orderRentalFeeType,
									feeName: data.feeName,
									feeAmount: data.feeAmount,
									occurrenceTime: data.occurrenceTime,
									// payType: 1,
									images: data.images,
									
									
								}
							
							} else if (data.deductType == 3) {
								send = 'rentCarform';
								obj = {
									orderRentalFeeType: data.orderRentalFeeType,
									feeName: data.feeName,
									feeAmount: data.feeAmount,
									// payType: 1,
									images: data.images,
									
									
								}
								
							}
							
                      this.$nextTick(() => {
                         
                      this[send].setFieldsValue(obj)
                      
                      })

							this.createEditLoading = false
						} else {
							this.createEditLoading = false
						}
					})
					.finally(() => (this.loading = false))
			},
			cancelBtn() {
				this.showModal = false
				if(this.deductionType==1){
					this.$refs.selectCity.cityId = undefined
				}
				
				this.createEditLoading = false
				this.form.resetFields()
				this.carform.resetFields()
				this.rentCarform.resetFields()
			},


			submit(send) {
				let parameter = send
				parameter.depositId = this.currData.id
				parameter.deductType = this.deductionType,
					console.log(parameter, 'shuju')

				this.createEditLoading = true
				createOrderDeduction(send)
					.then((data) => {
						if (data) {
							this.$message.success('提交成功！')
							this.createEditLoading = false
							this.cancelBtn()
							this.$emit('success')
						} else {
							this.createEditLoading = false
						}
					})
					.finally(() => (this.loading = false))
			},
			confirmHandle() {
				let send = null;

				if (this.deductionType == 1) {
					send = 'form';
				} else if (this.deductionType == 2) {
					send = 'carform';
				} else if (this.deductionType == 3) {
					send = 'rentCarform';
				}

				this[send].validateFields((errors, values) => {
					if (!errors) {
						console.log(values, '数据');
						this.submit(values)
						// 表单字段验证通过
						// 在这里可以进行其他操作，如提交表单数据
					} else {
						// 表单字段验证失败
						// 可以根据错误信息进行处理
						// console.log(errors,'错误');
					}
				});


				// tag 验证所有表达数据

			},
			getFileLength(type) {
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			carformgetFileLength(type) {
				return get(this.carform.getFieldValue(type), 'length') || 0
			},
			rentCarformgetFileLength(type) {
				return get(this.rentCarform.getFieldValue(type), 'length') || 0
			},
			uploadSuccess(data, type, index) {
				this.fileList = data
				this.domain.images.push(data.path)

				this.form.setFieldsValue({
					images: [...this.form.getFieldValue(type), data.path],
				})
			},
			carformuploadSuccess(data, type, index) {

				// this.carform.setFieldsValue({
				// 	[type]: [...this.carform.getFieldValue(type), data.path],
				// })
				this.carDamageDomains.images.push(data.path)

				this.carform.setFieldsValue({
					images: [...this.carform.getFieldValue(type), data.path],
				})
			},
			rentCarformuploadSuccess(data, type, index) {
				this.rentCarformDomains.images = data.path
				this.rentCarform.setFieldsValue({
					images: [...this.rentCarform.getFieldValue(type), data.path],
				})
			},
		},
	}
</script>
<style scoped lang='less'>
	.vehicleDamage {
		/deep/.ant-form-item-label {
			width: 130px;
		}
	}
/deep/.ant-modal-wrap{
	z-index:1001
}
	.formstyle {
		background-color: #f9f9f9;
		border-radius: 10px;
	}

	/deep/ .ant-form label {
		font-weight: 550;
		color: #333333;
		font-size: 18px !important;
	}

	.addBtn {
		width: 120px;
		height: 32px;
		background: #1890ff;
		border-radius: 20px;
		font-weight: 500;
		font-size: 15px;
		color: #ffffff;
	}

	.delbTN {
		width: 120px;
		height: 32px;
		// background: #1890ff;
		border-radius: 20px;
		// opacity: 0.2;
		// border: 1px solid #979797;
		font-weight: 500;
		font-size: 15px;
	}

	.fontstytle {
		.title {
			font-weight: 500;
			color: #333333;
			font-size: 30px;
		}

		.content {
			font-weight: 500;
			color: #999999;
			font-size: 14px;
			line-height: 10px;
			margin-left: 10px;
		}
	}

	.imgStyle {
		width: 220px;
		height: 94px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 16px 0px 16px 24px;
		box-sizing: border-box;
	}

	.img1 {
		background-image: url('https://cmzc.oss-cn-hangzhou.aliyuncs.com/cmtbVendor/Order/weizhang/pic1%402x.png');
	}

	.img2 {
		background-image: url('https://cmzc.oss-cn-hangzhou.aliyuncs.com/cmtbVendor/Order/weizhang/pic2%402x.png');
	}

	.img3 {
		background-image: url('https://cmzc.oss-cn-hangzhou.aliyuncs.com/cmtbVendor/Order/weizhang/pic3%402x.png');
	}

	.carimg {
		background-image: url('https://cmzc.oss-cn-hangzhou.aliyuncs.com/cmtbVendor/Order/weizhang/pic_car%20damage%402x.png');
	}

	.rentCarimg {
		background-image: url('https://cmzc.oss-cn-hangzhou.aliyuncs.com/cmtbVendor/Order/weizhang/pic_cost%402x.png');
	}
</style>